<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.clearFix::after{
			content: "";
			clear: both;
			display: block;
		}
		.header{
			padding: 15px 0;
			background-color: #eee;

		}
		.header>img{
			height: 50px;
			margin-left:50px ;
			margin-right: 30px;
			float: left;
		}
		.header-title{
			height: 50px;
			background-color: white;
		}
		.header-title>a{
			text-decoration: none;
			color: black;
			line-height: 50px;
			float: left;
			margin: 0 20px;
		}
		.two-only{
			width: 100%;
			height: 0;
			background-color: pink;
			position: absolute;
			left: 0;
/*			display: none;*/
			transition: all 0.3s;
			overflow: hidden;

		}
		.two:hover>div{
			height: 200px;
			display: block;

		}
		.two-only>div{
			width: 200px;
			background-color: aqua;
			margin-top:20px ;
			margin-left: 20px;
			
		}
		.cat{
			width: 100%;
		}


	</style>
</head>
<body>
	<div class="header clearFix">
		<img src="../小米logo.png">
		<div class="header-title clearFix">
			<a href="">
				全部商品分类
				<div></div>
			</a>
			<a class="two" href="">
				Xiaomi手机
				<div class="two-only">
					<div class="two-oen">
						<img class="cat" src="../小猫.jpg">
						<p>小猫一号</p>
						<p>1.99元起</p>
					</div>
				</div>
			</a>
			<a href="">Redmi手机</a>

		</div>
	</div>

</body>
</html>